<template>
  <canvas ref="domRef" width="120" height="40" @click="getImgCode"></canvas>
</template>
<script setup lang="ts">
import { watch } from "vue";
import { useImageCode } from "./useImageCode";
defineOptions({
  name: "VerifyicationCode"
});
interface Props {
  code?: string;
}

interface Emits {
  (e: "update:code", code: string): void;
}

const props = withDefaults(defineProps<Props>(), {
  code: ""
});

const emits = defineEmits<Emits>();

const { domRef, imgCode, setImgCode, getImgCode } = useImageCode();

watch(
  () => props.code,
  (newVal) => {
    setImgCode(newVal);
  }
);
watch(imgCode, (newVal) => {
  emits("update:code", newVal);
});

defineExpose({ getImgCode });
</script>
<style scoped lang="scss">
canvas {
  cursor: pointer;
}
</style>
